<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <el-card style="max-width: 100%">
    <el-table :data="rightsList" border style="width: 100%" stripe>
      <el-table-column label="权限名称" prop="authName" />
      <el-table-column label="路径" prop="path" />
      <el-table-column label="权限等级" prop="level">
        <template v-slot="{ row }">
          <el-tag v-if="row.level === '0'" type="primary">一级</el-tag>
          <el-tag v-if="row.level === '1'" type="success">二级</el-tag>
          <el-tag v-if="row.level === '2'" type="warning">三级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { getRightsLists } from '@/api/rights'
const rightsList = ref([])
const getRightsList = async () => {
  const res = await getRightsLists('list')
  rightsList.value = res
}
getRightsList()
</script>

<style lang="scss" scoped></style>
